<template>
  <div class="main">
    <el-steps :active="step" class="step-content">
      <el-step title="第一步" description=""></el-step>
      <el-step title="第二步" description=""></el-step>
      <el-step title="第三步" description=""></el-step>
    </el-steps>
    <div class="step1" v-show="step === 1">
      <div class="tips">第一步：将报价表列表复制到下列输入框中</div>

      <el-input type="textarea" v-model="value" :rows="5">
      </el-input>
      <el-button @click="calcList" type="primary" class="btn-calc">计算</el-button>
      <el-card class="box-card">
        一共识别：{{ origin_list.length }} 条数据
      </el-card>
      <el-table :data="origin_list" max-height="500">
        <el-table-column prop="origin_spname" label="货名"></el-table-column>
        <el-table-column prop="target_spname" label="对应系统货名"></el-table-column>
        <el-table-column prop="jj" label="进价"></el-table-column>
      </el-table>
      <div class="btn-next">
        <el-button @click="step++" type="primary">下一步</el-button>
      </div>
    </div>
    <div class="step2" v-show="step === 2">
      <el-table ref="origin_table" :data="origin_list" max-height="300" @row-click = "onRowClick" :row-class-name="tableRowClassName" highlight-current-row @current-change="handleCurrentChange">
        <el-table-column prop="origin_spname" label="货名"></el-table-column>
        <el-table-column prop="target_spname" label="对应系统货名"></el-table-column>
        <el-table-column prop="jj" label="进价"></el-table-column>
      </el-table>
<!--      <h3 v-if="origin_list.length">当前条： {{origin_list[currentRowIndex]['origin_spname'] || '无'}}</h3>-->
      <el-autocomplete class="input-search" v-model="search" @keyup.enter.native="ensureGood" :debounce="800" :highlight-first-item="true" :fetch-suggestions="searchChange"></el-autocomplete>
      <el-button @click="ensureGood">确定</el-button>
      <el-button @click="step--" type="primary">上一步</el-button>
    </div>
  </div>
</template>

<script>
import {queryGoods} from "@/api/goods";


export default {
  name: "assistant",
  data(){
    return {
      step: 1,
      value: '',
      currentRow: null,
      origin_list: [],
      queueGoodList: [],
      search: '',
      currentRowIndex: null
    }
  },
  methods:{
    calcList(){
      this.origin_list = []
      let arr = this.value.replace('\n$', '').split('\n')
      for (let i = 0; i < arr.length; i++){
        const each = arr[i];
        if(each === '') {
          continue;
        }
        let data = {
          origin_spname: each,
          target_spname: '',
          jj: ''
        }
        this.origin_list.push(data)
      }
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    searchChange(queryString, cb){
      if(queryString !== ''){
        queryGoods(queryString).then((res)=>{
          this.queueGoodList = res.data
          let result = res.data.map(x=>{
            return {value: x.spname, jj: x.jj}
          })
          cb(result)
        })
      }
    },
    tableRowClassName({row, rowIndex}) {
      row.row_index = rowIndex;
    },
    onRowClick (row, event, column) {
      this.currentRowIndex = row.row_index;
      let origin_spname = this.origin_list[row.row_index].origin_spname
    },
    ensureGood(){
      if(this.search !== ''){
        this.currentRow.target_spname = this.search
        this.queueGoodList.forEach((each)=>{
          if(each.spname === this.search){
            this.currentRow.jj = each.newjj
          }
        })
      }
      this.search = ''
      this.currentRowIndex ++
      this.$refs.origin_table.setCurrentRow(this.origin_list[this.currentRowIndex])

    }
  }
}
</script>

<style lang="scss" scoped>
 .main{
   padding: 10px;
   .step-content{
     margin: 50px 0;
   }
   .tips{
     margin: 10px;
     margin-top: 20px;
   }
   .btn-calc{
     margin-top: 10px;
   }
   .box-card{
     margin: 10px 0;
   }
   .btn-next{
     width: 100%;
     text-align: center;
     margin: 40px 0;
   }
   .input-search{
     width: 100%;
     margin: 20px 0;
   }
 }
</style>
